<template>
	<view>
		<view class="inbox-header">
			<view class="layout">
				<view class="inbox-header-tooltip">消息<text>(130)</text></view>
				<view class="inbox-header-read" @click="handleMessageReadSubmit()">
					<view class="layout">
						<view>
							<image src="/static/icon/icon-remove.png"></image>
						</view>
						<view>全部已读</view>
					</view>
				</view>
				<view class="inbox-header-setting" @click="handleMessageSettingButton()">设置</view>
			</view>
		</view>
		<view class="inbox-list">
			<view class="inbox-list-item" v-for="(subscribe,index) in subscribeList" :key="index">
				<view class="layout" @click="handleMessageButton(subscribe)">
					<view class="inbox-list-item-icon">
						<image :src="subscribe.icon"></image>
						<view class="inbox-list-item-icon-num" v-if="subscribe.messageTotal > 0">{{subscribe.messageTotal}}</view>
					</view>
					<view class="inbox-list-item-text">
						<view class="inbox-list-item-text-message">
							<view class="layout">		
								<view class="inbox-list-item-text-title">{{subscribe.title}}</view>
								<view class="inbox-list-item-text-time">{{subscribe.message.sendTime}}</view>
							</view>
						</view>
						<view class="inbox-list-item-text-message-text">
							{{subscribe.message.title}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				subscribeList:[
					{
						title:"钱包",
						icon:"/static/icon/icon-wallet.png",
						messageTotal:15,
						message:{
							title:"已支付￥1200.55",
							sendTime:"2024-11-01 13:25:25"
						}
					},					
					{
						title:"优惠福利",
						icon:"/static/icon/icon-discount.png",
						messageTotal:0,
						message:{
							title:"景点门票：您有一张5元大额优惠卷",
							sendTime:"2024-12-25 13:25:25"
						}
					},					
					{
						title:"订单动态",
						icon:"/static/icon/icon-order.png",
						messageTotal:0,
						message:{
							title:"景点门票：您有一张5元大额优惠卷",
							sendTime:"2024-12-25 13:25:25"
						}
					},					
					{
						title:"策略通知",
						icon:"/static/icon/icon-policy.png",
						messageTotal:0,
						message:{
							title:"景点门票：您有一张5元大额优惠卷",
							sendTime:"2024-12-25 13:25:25"
						}
					},					
					{
						title:"突发新闻",
						icon:"/static/icon/icon-news.png",
						messageTotal:0,
						message:{
							title:"景点门票：您有一张5元大额优惠卷",
							sendTime:"2024-12-25 13:25:25"
						}
					},					
					{
						title:"期权动态",
						icon:"/static/icon/icon-option.png",
						messageTotal:0,
						message:{
							title:"生猪期权8月23日上市",
							sendTime:"2024-12-25 13:25:25"
						}
					},					
					{
						title:"工作日程",
						icon:"/static/icon/icon-schedule.png",
						messageTotal:0,
						message:{
							title:"中指24年08月16日末日任务",
							sendTime:"2024-12-25 13:25:25"
						}
					}
				]
			}
		},
		methods: {
			handleMessageButton:function(subscribe){
				uni.navigateTo({
					url:"/pages/message/order/order"
				})
			},
			handleMessageSettingButton:function(){
				uni.navigateTo({
					url:"/pages/message/setting/setting"
				})
			},
			//消息全读
			handleMessageReadSubmit:function(){
				this.$message.onMessageReadSubmit().then()
			}
		}
	}
</script>

<style>
page { background: #ededed; padding-top: 180rpx; }
.inbox-header { background: #fff; padding: 0 25rpx; padding-bottom: 30rpx; height:100rpx; }
.inbox-header { position: fixed; top:var(--status-bar-height); left: 0; right: 0; z-index: 100; }
.inbox-header-tooltip { font-size: 24px; }	
.inbox-header-tooltip text { font-size: 14px; color: #ededed;}
.inbox-header-read { width: 200rpx; padding-top: 25rpx;}
.inbox-header-setting { width: 400rpx; padding-top: 25rpx; text-align: right;}

.inbox-list {  }	
.inbox-list-item { padding: 0 25rpx; background: #fff;}
.inbox-list-item-icon { width: 100rpx; height: 100rpx; padding: 25rpx 25rpx; position: relative; }
.inbox-list-item-icon-num { position: absolute; right: 10rpx; top: 10rpx; background: red; color: #fff;}
.inbox-list-item-icon-num { border-radius: 100%; padding: 10rpx; font-size: 10px; font-weight: bold;}
.inbox-list-item-icon-num { min-width: 20rpx; min-height: 20rpx; text-align: center;}
.inbox-list-item-text { width: 550rpx; padding-top: 25rpx; border-bottom: #ededed 1px solid;}
.inbox-list-item-text-title { width: 450rpx; font-size: 18px; }
.inbox-list-item-text-message { width: 550rpx;}
.inbox-list-item-text-message-text { width: 550rpx; padding-top: 15rpx; }
.inbox-list-item-text-time { width: 100rpx; height: 30rpx; overflow: hidden;}
</style>
